<template>
  <PopupBox class="rule-popup" v-model="visible">
    <div class="dt">参与方式</div>
    <div class="dd">在活动期间领取折扣券，购买精斗云相关产品时使用。</div>
    <div class="dt">适用产品</div>
    <div class="dd">云会计，云进销存，云财贸，精斗云V5，账无忧</div>
    <div class="dt">活动规则</div>
    <div class="dd">
      1、领取折扣券后在工作台-我的代金券查看，在官网 www.jdy.com 购买产品时使用；
      <br />2、领取折扣券后，购买或者续费产品时，可以在确认订单界面使用领取的代金券，确认订单界面将显示该登录用户所属公司所有员工账户下绑定的所有代金券；
      <br />3、折扣券无法叠加使用，在确认订单时只能选择1张折扣券进行使用；
      <br />4、用户使用折扣券购买或者续费产品后，如果发生退款，将按实际成交金额退款，且折扣券将不予返还；
      <br />5、折扣券有效期从领取之日起15日内有效，只能用于产品新购和续费，产品升级（增加用户数、增加账套数）无法使用；
      <br />6、促销产品一经购买，不退不换
    </div>
    <div class="dt">本活动最终解释权归金蝶蝶金云计算有限公司所有</div>
  </PopupBox>
</template>

<script>
import PopupBox from '@/components/popup-box';
export default {
  components: {
    PopupBox
  },
  props: {
    value: Boolean
  },
  data() {
    return {
      visible: this.value
    };
  },
  watch: {
    value(val) {
      this.visible = val;
    },
    visible(val) {
      this.$emit('input', val);
    }
  }
};
</script>

<style scoped>
.popup-wrapper {
  z-index: 1000;
  position: fixed;
  top: 20%;
  padding: 0 16px;
}

.popup {
  padding-bottom: 20px;
  background: #fff;
}

.popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  line-height: 48px;
  padding: 0 24px;
  font-size: 18px;
  box-shadow: 0 1px 0 0 #e6e6e6;
}

.popup__body {
  overflow: auto;
  height: 300px;
  padding: 0 16px;
  padding-bottom: 10px;
  font-size: 14px;
  line-height: 22px;
  text-align: justify;
}

.dt {
  font-weight: bold;
  margin-top: 16px;
}

.dd {
  margin-top: 4px;
  color: #666666;
}

.btn-close {
  cursor: pointer;
}
</style>
